<template>
  <div class="container">
    <div class="input-container">
      <div class="ghhjj">
      <span class="police1">设备编号</span>
      <el-input
        v-model="deviceId"
        placeholder="请输入设备编号"
        size="middle"
        class="input-box"
      ></el-input>
      <el-button
        size="middle"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
        class="search-btn"
        >搜索</el-button
      >
      <el-button
        size="middle"
        type="default"
        icon="el-icon-refresh"
        @click="handleReset"
        class="reset-btn"
        >重置</el-button
      >
    </div>
        
  </div>
    <div class="table-container">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="55"></el-table-column>
        <el-table-column
          prop="id"
          label="设备属性表编号"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="主机地址"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="axisNumber"
          label="轴数"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="cycleM"
          label="上模周期"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="cycleC"
          label="当前周期"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="axisPosition"
          label="轴位置"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="axisTorque"
          label="轴扭矩"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="axisVelocity"
          label="周速度"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="maxTemperrature"
          label="各轴最大温度"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="vdc"
          label="各轴平均母线电压"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="maxVelocity"
          label="轴最大速度"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="loadRate"
          label="各轴平均负载率"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="deviceId"
          label="外键设备id"
          width="120"
        ></el-table-column>

        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="120"
        ></el-table-column>

        <el-table-column
          prop="longitude"
          label="经度"
          width="120"
        ></el-table-column>

        <el-table-column
          prop="latitude"
          label="纬度"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="recordId"
          label="报警号"
          width="120"
        ></el-table-column>
      </el-table>
    </div>
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageNum"
    :page-sizes="[5,10,15, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment-timezone";
export default {
  data() {
    return {
      deviceId: "",
      tableData: [],
      selectedRow: null,
      cunchushu1: [],
      dateRange: [],
      selectedNames1: [], // 存放选中行的 name 变量的全局数组
      //multipleSelection: [],
      adddialogVisible: false,
      dialogVisible: false,
      pageNum: 1,
      pageSize: 10,
      total:400,
      formData: {
        id: "",
        address: "",

  axisNumber: "",
  cycleM: "",
  cycleC: "",
  axisPosition: "",
  axisTorque: "",
  axisVelocity: "",
  maxTemperrature: "",
  vdc: "",
  maxVelocity: "",
  loadRate: "",
  deviceId: "",
  updateTime: "",
  longitude: "",
  latitude: "",
  recordId: ""
},
selectedRow: {
  id: "",
  address: "",
  axisNumber: "",
  cycleM: "",
  cycleC: "",
  axisPosition: "",
  axisTorque: "",
  axisVelocity: "",
  maxTemperrature: "",
  vdc: "",
  maxVelocity: "",
  loadRate: "",
  deviceId: "",
  updateTime: "",
  longitude: "",
  latitude: "",
  recordId: ""
},
    // 表单验证规则
    formRules: {
      id: [
        { required: true, message: "请输入报警编号", trigger: "blur" },
      ],
      address: [
        { required: true, message: "请输入主机地址", trigger: "blur" },
      ],
      axisNumber: [
        { required: true, message: "请输入轴数", trigger: "blur" },
      ],
      cycleM: [
        { required: true, message: "请输入上模周期", trigger: "blur" },
      ],
      cycleC: [
        { required: true, message: "请输入当前周期", trigger: "blur" },
      ],
      axisPosition: [
        { required: true, message: "请输入轴位置", trigger: "blur" },
      ],
      axisTorque: [
        { required: true, message: "请输入轴扭矩", trigger: "blur" },
      ],
      axisVelocity: [
        { required: true, message: "请输入周速度", trigger: "blur" },
      ],
      maxTemperrature: [
        { required: true, message: "请输入各轴最大温度", trigger: "blur" },
      ],
      vdc: [
        { required: true, message: "请输入各轴平均母线电压", trigger: "blur" },
      ],
      maxVelocity: [
        { required: true, message: "请输入轴最大速度", trigger: "blur" },
      ],
      loadRate: [
        { required: true, message: "请输入各轴平均负载率", trigger: "blur" },
      ],
      deviceId: [
        { required: true, message: "请输入外键设备id", trigger: "blur" },
      ],
      updateTime: [
        { required: true, message: "请输入更新时间", trigger: "blur" },
      ],
      longitude: [
        { required: true, message: "请输入经度", trigger: "blur" },
      ],
      latitude: [
        { required: true, message: "请输入纬度", trigger: "blur" },
      ],
      recordId: [
        { required: true, message: "请输入报警号", trigger: "blur" },
      ],
    },
  };
  },
  
  mounted() {
    this.page();
  },
  methods: {
    handleCurrentChange(pageNum){
      this.pageNum = pageNum;
      this.page();
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize;
      this.page();
    },
    //限定当天日期返回的表格数据，
    page(){
      Axios.get(`http://localhost:8080/example/data/pageNow?pageNum=${this.pageNum}&pageSize=${this.pageSize}`)
      .then((res) => {
        console.log(res);
        //我的修改部分
        for(let i=0; i<res.data.data.length; i++) {
  const selectedTime = moment(res.data.data[i].updateTime);
  const deviceTimeZone = moment.tz.guess();
  const localTime = selectedTime.tz(deviceTimeZone).format("YYYY-MM-DD HH:mm:ss");
  res.data.data[i].updateTime = localTime;
}

this.tableData = res.data.data;
// this.total = this.tableData.length;
      })
      .catch((err) => {
        console.log(err);
      });
    },

    handleReset(){
      this.pageNum = 1;
      this.pageSize = 10;
      // `http://localhost:8080/example/alert?pageNum=${pageNum}&pageSize=${pageSize}`
      this.deviceId = ''
      this.page();
    },
    handleSearch() {
  if (!this.deviceId) {
    this.$message.warning("请输入设备编号");
    return;
  }
  const params = {};
  if (this.deviceId) {
    params.deviceId = this.deviceId;
  }
  const url = 'http://localhost:8080/example/data/searchNow';
  Axios.get(url, { params })
    .then(response => {
      if (response.data.length === 0) {
        this.$message.warning("没有搜索到相关信息");
        return;
      }
      for (let i = 0; i < response.data.data.length; i++) {
        const selectedTime = moment(response.data.data[i].updateTime);
        const deviceTimeZone = moment.tz.guess();
        const localTime = selectedTime.tz(deviceTimeZone).format("YYYY-MM-DD HH:mm:ss");
        response.data.data[i].updateTime = localTime;
      }
      this.tableData = response.data.data;
    })
    .catch(error => {
      console.error(error);
      this.$message.error("搜索出错，请稍后再试");
    });
},
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    dateFilter(row, column) {
      return moment(row.activationTime).format("YYYY-MM-DD HH:mm:ss");
    },

},
};
</script>

<style scoped>
.container {
  margin-top: 30px;
}
.ghhjj{
  display:flex;
  margin:20px;
  align-items:justify-content;
}
.police1 {
  margin-right: 20px;
}
.input-container {
  align-items: center;
  margin-bottom: 10px;
  margin-left: 20px;
  display: inline-block;
}

.input-box {
  width: 300px;
  margin-right: 10px;
}

.search-btn {
  margin-left: 10px;
}

.table-container {
  position: relative;
  width: 100%;
}

.option {
  margin-left: 20px;
}
</style>
<!-- 03  当前页面 -->